{% extends "base.html" %}

{% block content %}
<!-- 内联样式 -->
<style>
/* 液态玻璃效果基础样式 */
h2 {
    color: #1C1C1E !important;
    position: relative;
    z-index: 2;
}

[data-theme="dark"] h2 {
    color: #ffffff !important;
}

/* 面包屑导航液态玻璃效果 */
.breadcrumb {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 20px;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    position: relative;
    overflow: hidden;
}

.breadcrumb::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0.6;
}

.breadcrumb > * {
    position: relative;
    z-index: 1;
}

[data-theme="dark"] .breadcrumb {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .breadcrumb::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
}

/* 脚本统计信息液态玻璃效果 */
.script-stats {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    position: relative;
    overflow: hidden;
}

.script-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0.6;
}

.script-stats > * {
    position: relative;
    z-index: 1;
}

[data-theme="dark"] .script-stats {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .script-stats::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
}

/* 编辑器容器液态玻璃效果 */
.editor-container {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    margin-bottom: 20px;
    position: relative;
}

.editor-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0.6;
    z-index: 0;
}

.editor-container > * {
    position: relative;
    z-index: 1;
}

[data-theme="dark"] .editor-container {
    background: rgba(0, 0, 0, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .editor-container::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
}

/* 编辑器头部液态玻璃效果 */
.editor-header {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #1C1C1E !important;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    position: relative;
    overflow: hidden;
}

.editor-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0.8;
}

.editor-header > * {
    position: relative;
    z-index: 1;
}

[data-theme="dark"] .editor-header {
    background: rgba(0, 0, 0, 0.4) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .editor-header::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}

.editor-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* 简化的代码编辑器样式 */
.code-editor-container {
    position: relative;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    overflow: hidden;
}

.code-editor-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    pointer-events: none;
    z-index: 0;
}

.code-textarea {
    width: 100%;
    min-height: 500px;
    padding: 1rem;
    border: none;
    outline: none;
    background: transparent;
    color: #1C1C1E;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    position: relative;
    z-index: 1;
}

.code-textarea:focus {
    box-shadow: none;
}

/* 操作按钮液态玻璃效果 */
.action-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    pointer-events: none;
    opacity: 0.8;
    z-index: 0;
}

.btn > * {
    position: relative;
    z-index: 1;
}

.btn-save {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.btn-save:hover {
    background: rgba(40, 167, 69, 0.3);
    border-color: rgba(40, 167, 69, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(40, 167, 69, 0.3);
}

.btn-cancel {
    background: rgba(108, 117, 125, 0.2);
    color: #6c757d;
    border: 1px solid rgba(108, 117, 125, 0.3);
}

.btn-cancel:hover {
    background: rgba(108, 117, 125, 0.3);
    border-color: rgba(108, 117, 125, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(108, 117, 125, 0.3);
}

[data-theme="dark"] .btn-save {
    background: rgba(40, 167, 69, 0.3);
    color: #4ade80;
    border-color: rgba(40, 167, 69, 0.4);
}

[data-theme="dark"] .btn-save:hover {
    background: rgba(40, 167, 69, 0.4);
    border-color: rgba(40, 167, 69, 0.6);
}

[data-theme="dark"] .btn-cancel {
    background: rgba(108, 117, 125, 0.3);
    color: #9ca3af;
    border-color: rgba(108, 117, 125, 0.4);
}

[data-theme="dark"] .btn-cancel:hover {
    background: rgba(108, 117, 125, 0.4);
    border-color: rgba(108, 117, 125, 0.6);
}

[data-theme="dark"] .code-editor-container {
    background: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .code-editor-container::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.01) 100%);
}

[data-theme="dark"] .code-textarea {
    color: #ffffff;
}
</style>

<!-- 面包屑导航 -->
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ url_for('dashboard') }}">首页</a></li>
        <li class="breadcrumb-item"><a href="{{ url_for('script_management') }}">脚本管理</a></li>
        <li class="breadcrumb-item active" aria-current="page">编辑脚本</li>
    </ol>
</nav>

<!-- 脚本统计信息 -->
<div class="script-stats">
    <div class="row">
        <div class="col-md-2">
            <div class="text-center">
                <h4 id="lineCount">0</h4>
                <small>行数</small>
            </div>
        </div>
        <div class="col-md-2">
            <div class="text-center">
                <h4 id="charCount">0</h4>
                <small>字符数</small>
            </div>
        </div>
        <div class="col-md-2">
            <div class="text-center">
                <h4 id="wordCount">0</h4>
                <small>单词数</small>
            </div>
        </div>
        <div class="col-md-2">
            <div class="text-center">
                <h4>{{ script.filename }}</h4>
                <small>文件名</small>
            </div>
        </div>
        <div class="col-md-2">
            <div class="text-center">
                <h4>v{{ script.current_version or 0 }}</h4>
                <small>当前版本</small>
            </div>
        </div>
        <div class="col-md-2">
            <div class="text-center">
                <h4>{{ versions|length if versions else 0 }}</h4>
                <small>历史版本数</small>
            </div>
        </div>
    </div>
</div>

<!-- 编辑器表单 -->
<form method="POST">
    <div class="editor-container">
        <div class="editor-header">
            <div class="editor-controls">
                <span id="cursorPosition">行 1, 列 1</span>
            </div>
        </div>
        
        <div class="code-editor-container">
            <textarea id="codeEditor" name="content" class="code-textarea" placeholder="在此输入代码...">{{ script_content }}</textarea>
        </div>
    </div>
    
    <div class="action-buttons">
        <div class="mb-3">
            <label for="commitMessage" class="form-label">提交信息</label>
            <input type="text" class="form-control" id="commitMessage" name="commit_message" placeholder="描述此次更改的内容..." required>
        </div>
        <button type="submit" class="btn btn-save">
            💾 保存更改
        </button>
        <a href="{{ url_for('script_management') }}" class="btn btn-cancel">
            ❌ 取消编辑
        </a>
    </div>
</form>

<!-- 版本历史 -->
<div class="card mt-4">
    <div class="card-header">
        <h5 class="card-title mb-0">版本历史</h5>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>版本</th>
                        <th>提交信息</th>
                        <th>创建人</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for version in versions %}
                    <tr>
                        <td>v{{ version.version }}</td>
                        <td>{{ version.commit_message }}</td>
                        <td>{{ version.created_by.username if version.created_by else '未知' }}</td>
                        <td>{{ version.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                        <td>
                            <a href="{{ url_for('view_script_version', script_id=script.id, version=version.version) }}" class="btn btn-sm btn-info">
                                <i class="fas fa-eye"></i> 查看
                            </a>
                            <form action="{{ url_for('rollback_script_version', script_id=script.id, version=version.version) }}" method="post" style="display: inline;">
                                <button type="submit" class="btn btn-sm btn-warning" onclick="return confirm('确定要回滚到此版本吗？')">
                                    <i class="fas fa-history"></i> 回滚
                                </button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
// 光标位置显示
function updateCursorPosition() {
    const textarea = document.getElementById('codeEditor');
    const text = textarea.value;
    const cursorPos = textarea.selectionStart;
    
    // 计算行和列
    const textBeforeCursor = text.substring(0, cursorPos);
    const lines = textBeforeCursor.split('\n');
    const line = lines.length;
    const column = lines[lines.length - 1].length + 1;
    
    document.getElementById('cursorPosition').textContent = `行 ${line}, 列 ${column}`;
}

// 统计信息更新
function updateStats() {
    const textarea = document.getElementById('codeEditor');
    const content = textarea.value;
    const lines = content.split('\n').length;
    const chars = content.length;
    const words = content.trim().split(/\s+/).filter(word => word.length > 0).length;
    
    document.getElementById('lineCount').textContent = lines;
    document.getElementById('charCount').textContent = chars;
    document.getElementById('wordCount').textContent = words;
}

// 监听内容变化
document.addEventListener('DOMContentLoaded', function() {
    const textarea = document.getElementById('codeEditor');
    
    // 监听光标位置变化
    textarea.addEventListener('click', updateCursorPosition);
    textarea.addEventListener('keyup', updateCursorPosition);
    textarea.addEventListener('input', updateCursorPosition);
    
    // 监听内容变化
    textarea.addEventListener('input', updateStats);
    
    // 初始化统计
    updateStats();
    updateCursorPosition();
    
    // 自动调整文本框高度
    function adjustHeight() {
        textarea.style.height = 'auto';
        textarea.style.height = Math.max(500, textarea.scrollHeight) + 'px';
    }
    
    // 监听输入事件
    textarea.addEventListener('input', adjustHeight);
    
    // 初始化高度
    adjustHeight();
});

// 键盘快捷键
document.addEventListener('keydown', function(e) {
    // Ctrl+S 保存
    if (e.ctrlKey && e.key === 's') {
        e.preventDefault();
        document.querySelector('form[method="POST"]:not([action])').submit();
    }
    
    // Tab 键处理
    if (e.key === 'Tab') {
        e.preventDefault();
        const textarea = document.getElementById('codeEditor');
        const start = textarea.selectionStart;
        const end = textarea.selectionEnd;
        
        if (e.shiftKey) {
            // Shift+Tab: 减少缩进
            const text = textarea.value;
            const beforeCursor = text.substring(0, start);
            const afterCursor = text.substring(end);
            
            // 检查当前行是否有缩进
            const lines = text.split('\n');
            const currentLineIndex = beforeCursor.split('\n').length - 1;
            const currentLine = lines[currentLineIndex];
            
            if (currentLine.startsWith('    ')) {
                const newText = text.substring(0, start - 4) + text.substring(start);
                textarea.value = newText;
                textarea.selectionStart = textarea.selectionEnd = start - 4;
            }
        } else {
            // Tab: 增加缩进
            textarea.value = textarea.value.substring(0, start) + '    ' + textarea.value.substring(end);
            textarea.selectionStart = textarea.selectionEnd = start + 4;
        }
        
        updateCursorPosition();
        updateStats();
    }
});

// 页面离开前提示
window.addEventListener('beforeunload', function(e) {
    const textarea = document.getElementById('codeEditor');
    if (textarea.value !== `{{ script_content | safe }}`) {
        e.preventDefault();
        e.returnValue = '您有未保存的更改，确定要离开吗？';
    }
});
</script>
{% endblock %}